<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
    <title>Music APP</title>
    <link rel="stylesheet" href="/public/css/style.css">
</head>

<body>
    <header>
        <!-- menu_side -->
        <div class="menu_side">
            <h1> Playlist </h1>
            <!-- playlist -->
            <div class="playlist">
                <h4 class="active"><span></span>
                    <i class="bi bi-music-note-beamed"></i>Personal display
                </h4>
                <h4><span></span>
                    <i class="bi bi-music-note-beamed"></i> Last Listening
                </h4>
                <h4><span></span>
                    <i class="bi bi-music-note-beamed"></i> Reconmended
                </h4>
            </div>
            <!-- menu_song -->
            <div class="menu_song">
                <li class="songItem">
                    <span> 01 </span>
                    <img src="/public/img/1.jpg" alt="">
                    <h5> On My Way
                        <div class="subtitle"> Sfas </div>
                    </h5>
                    <i class="bi playListPlay bi-play-circle-fill" id="1"></i>
                </li>

                <li class="songItem">
                    <span> 02 </span>
                    <img src="/img/2.jpg" alt="">
                    <h5> On My Way
                        <div class="subtitle"> Sfas </div>
                    </h5>
                    <i class="bi playListPlay bi-play-circle-fill" id="2"></i>
                </li>

                <li class="songItem">
                    <span> 03 </span>
                    <img src="/img/3.jpg" alt="">
                    <h5> On My Way
                        <div class="subtitle"> Sfas </div>
                    </h5>
                    <i class="bi playListPlay bi-play-circle-fill" id="3"></i>
                </li>

                <li class="songItem">
                    <span> 04 </span>
                    <img src="/img/4.jpg" alt="">
                    <h5> On My Way
                        <div class="subtitle"> Sfas </div>
                    </h5>
                    <i class="bi playListPlay bi-play-circle-fill" id="4"></i>
                </li>

                <li class="songItem">
                    <span> 05 </span>
                    <img src="/img/5.jpg" alt="">
                    <h5> On My Way
                        <div class="subtitle"> Sfas </div>
                    </h5>
                    <i class="bi playListPlay bi-play-circle-fill" id="5"></i>
                </li>

                <li class="songItem">
                    <span> 06 </span>
                    <img src="/img/6.jpg" alt="">
                    <h5> On My Way
                        <div class="subtitle"> Sfas </div>
                    </h5>
                    <i class="bi playListPlay bi-play-circle-fill" id="6"></i>
                </li>

            </div>
        </div>
        <!-- song_side -->
        <div class="song_side">
            <nav>
                <ul>
                    <li> Discover <span></span> </li>
                    <li> My Library </li>
                    <li> Radio </li>
                </ul>
                <!-- 46:00 -->
                <!-- search -->
                <div class="search">
                    <i class="bi bi-search"></i>
                    <input type="text" placeholder="search music...">
                </div>
                <div class="user">
                    <img src="/img/2.jpg" alt="user" title="KDS CODER(Jahid Khan)">
                </div>
            </nav>
            <div class="content">
                <h1> Alen Walker-fade </h1>
                <p>
                    You were the shadow to my light You were the shadow to my light
                    <br>
                    Afraid our aim is out of sight Afraid our aim is out of sight
                </p>
                <div class="buttons">
                    <button> play </button>
                    <button> follow </button>
                </div>
            </div>

            <!-- popular_song -->
            <div class="popular_song">
                <div class="h4">
                    <h4> Li Ronghao </h4>
                    <div class="btn_s">
                        <i id="left_scroll" class="bi bi-arrow-left-short"></i>
                        <i id="right_scroll" class="bi bi-arrow-right-short"></i>
                    </div>
                </div>

                <div class="pop_song">
                    <li class="songItem">
                        <div class="img_play">
                            <img src="./img/7.jpg" alt="alan">
                            <i class="bi playListPlay bi-play-circle-fill" id="7"></i>
                        </div>
                        <h5> Auld Lang Syne
                            <br>
                            <div class="subtitle"> Alan Walker </div>
                        </h5>
                    </li>

                    <li class="songItem">
                        <div class="img_play">
                            <img src="/img/8.jpg" alt="alan">
                            <i class="bi playListPlay bi-play-circle-fill" id="8"></i>
                        </div>
                        <h5> My Heart Will Go On
                            <br>
                            <div class="subtitle"> Alan Walker </div>
                        </h5>
                    </li>

                    <li class="songItem">
                        <div class="img_play">
                            <img src="/img/9.jpg" alt="alan">
                            <i class="bi playListPlay bi-play-circle-fill" id="9"></i>
                        </div>
                        <h5> Let It Go
                            <br>
                            <div class="subtitle"> Alan Walker </div>
                        </h5>
                    </li>

                    <li class="songItem">
                        <div class="img_play">
                            <img src="/img/10.jpg" alt="alan">
                            <i class="bi playListPlay bi-play-circle-fill" id="10"></i>
                        </div>
                        <h5> Half the World Away
                            <br>
                            <div class="subtitle"> Alan Walker </div>
                        </h5>
                    </li>

                    <li class="songItem">
                        <div class="img_play">
                            <img src="/img/11.jpg" alt="alan">
                            <i class="bi playListPlay bi-play-circle-fill" id="11"></i>
                        </div>
                        <h5> Casablanca
                            <br>
                            <div class="subtitle"> Alan Walker </div>
                        </h5>
                    </li>

                    <li class="songItem">
                        <div class="img_play">
                            <img src="/img/12.jpg" alt="alan">
                            <i class="bi playListPlay bi-play-circle-fill" id="12"></i>
                        </div>
                        <h5> Yesterday Once More
                            <br>
                            <div class="subtitle"> Alan Walker </div>
                        </h5>
                    </li>

                    <li class="songItem">
                        <div class="img_play">
                            <img src="/img/13.png" alt="alan">
                            <i class="bi playListPlay bi-play-circle-fill" id="13"></i>
                        </div>
                        <h5> Unchained Melody
                            <br>
                            <div class="subtitle"> Alan Walker </div>
                        </h5>
                    </li>

                    <li class="songItem">
                        <div class="img_play">
                            <img src="/img/14.jpg" alt="alan">
                            <i class="bi playListPlay bi-play-circle-fill" id="14"></i>
                        </div>
                        <h5> Nothing's Gonna Change My Love
                            <br>
                            <div class="subtitle"> Alan Walker </div>
                        </h5>
                    </li>

                    <li class="songItem">
                        <div class="img_play">
                            <img src="/img/15.jpg" alt="alan">
                            <i class="bi playListPlay bi-play-circle-fill" id="15"></i>
                        </div>
                        <h5> Scarborough Fair
                            <br>
                            <div class="subtitle"> Alan Walker </div>
                        </h5>
                    </li>
                </div>
            </div>

            <!-- popular_artists -->
            <div class="popular_artists">
                <div class="h4">
                    <h4> Pop Artists </h4>
                    <div class="btn_s">
                        <i id="left_scrolls" class="bi bi-arrow-left-short"></i>
                        <i id="right_scrolls" class="bi bi-arrow-right-short"></i>
                    </div>
                </div>
                <div class="item">
                    <li> <img src="/img/16.jpg" alt=""></li>
                    <li> <img src="/img/艾尔嗨森.jpg" alt="Arjit" title="Arjit"> </li>
                    <li> <img src="/img/散兵2.jpg" alt="Arjit" title="Arjit"> </li>
                    <li> <img src="/img/申鹤.jpg" alt="Arjit" title="Arjit"> </li>
                    <li> <img src="/img/将军.jpg" alt="Arjit" title="Arjit"> </li>
                    <li> <img src="/img/神子.jpg" alt="Arjit" title="Arjit"> </li>
                    <li> <img src="/img/胡桃.jpg" alt="Arjit" title="Arjit"> </li>
                    <li> <img src="/img/魈.jpg" alt="Arjit" title="Arjit"> </li>
                    <li> <img src="/img/水神.jpg" alt="Arjit" title="Arjit"> </li>
                    <li> <img src="/img/妮露.jpg" alt="Arjit" title="Arjit"> </li>
                    <li> <img src="/img/凌华.jpg" alt="Arjit" title="Arjit"> </li>
                    <li> <img src="/img/可莉.jpg" alt="Arjit" title="Arjit"> </li>
                    <li> <img src="/img/万叶.jpg" alt="Arjit" title="Arjit"> </li>
                    <li> <img src="/img/散兵.jpg" alt="Arjit" title="Arjit"> </li>
                    <li> <img src="/img/利威尔.jpg" alt="Arjit" title="Arjit"> </li>
                </div>
            </div>

        </div>


        <!-- master_play -->
        <div class="master_play">
            <div class="wave">
                <div class="wave1"></div>
                <div class="wave1"></div>
                <div class="wave1"></div>
            </div>

            <img src="/img/2.jpg" alt="Alan" id="poster_master_play">

            <h5 id="title"> On My Way <br>
                <div class="subtitle"> Alan Walker </div>
            </h5>

            <div class="icon">
                <i class="bi bi-skip-start-fill" id="back"></i>
                <i class="bi bi-play-fill" id="masterPlay"></i>
                <i class="bi bi-skip-end-fill" id="next"></i>
            </div>

            <span id="currentStart"> 0:00 </span>

            <div class="bar">
                <input type="range" id="seek" min="0" value="0" max="100">
                <div class="bar2" id="bar2"></div>
                <div class="dot"></div>
            </div>

            <span id="currentEnd"> 0:00 </span>

            <div class="vol">
                <i class="bi bi-volume-down-fill" id="vol_icon"></i>
                <input type="range" id="vol" min="0" value="30" max="100">
                <div class="vol_bar"></div>
                <div class="dot" id="vol_dot"></div>
            </div>

        </div>

    </header>
    <script src="/public/js/app.js"></script>
</body>

</html>